<template>
  <div class="row">
    <div class="col-md-12">
      <h1 class="page-header">
        作业管理 <small></small>
        <el-button type="primary" size="large" @click="jumpTo('addHomeWork')" class="float-right" circle>
          <el-icon :size="20" style="vertical-align: middle;">
            <Plus/>
          </el-icon>
        </el-button>
      </h1>

    </div>
  </div>
  <!-- /. ROW  -->
  <div class="row">
    <div class="col-md-12">

      <!-- Advanced Tables -->
      <el-table :data="homeWorkTable" style="width: 100%" max-height="250">
        <el-table-column prop="HomeworkName" label="作业名称" width="150"/>
        <el-table-column width="250">
          <template #header>

            <span class="w-2/5">所属课程:</span>
            <el-cascader
                class="w-3/5"
                :options="options"
                :props="{ checkStrictly: true }"
                v-model="selectedCurriculum"
                @change="changeSelCurr"
                clearable
            ></el-cascader>


          </template>
          <template #default="scope">
            {{scope.row.curriculum_name}}
          </template>
        </el-table-column>
        <el-table-column :formatter="TimeFormat" prop="EndTime" label="剩余时间" width="120"/>
        <el-table-column label="Operations" width="300">
          <template #default="scope">
            <el-button
                type="text"
                size="small"
                @click.prevent="deleteHomework(scope)"
            >
              删除
            </el-button>
            <el-button
                type="text"
                size="small"
                @click.prevent="$ses.pushByNameResId('HomeWorkStatus',{id:homeWorkTable[scope.$index].ID})"
            >
              查看交作业情况
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--End Advanced Tables -->
      <el-row>
        <div class="demo-pagination-block">
          <el-pagination
              v-model:currentPage="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="sizes, prev, pager, next"
              :total="count"
              @size-change="setUpData"
              @current-change="setUpData"
          >
          </el-pagination>
        </div>
      </el-row>
    </div>

  </div>
  <!-- /. ROW  -->
</template>

<script>
import axios from "axios";
import {Plus} from "@element-plus/icons-vue";
import moment from "moment";
import {ElMessage} from "element-plus";

export default {
  name: "homeworkList",
  components: {Plus},
  created() {
    console.log("dwa")
    this.setUpData()
    axios.post("/api/ListCurriculum").then((res) => {
      this.options = res.data
    })
  },
  mounted() {

    // axios.post("/api/GeyCurriculumSeries").then((res)=>{
    //   if (res.status===200){
    //     this.CurriculumList = res.data
    //   }
    // })
  },
  data() {
    return {
      selectedCurriculum:[],
      options:[],
      pageSize:10,
      page:1,
      count:1,
      homeWorkTable: [{
        "ID": "1467416349381758976",
        "CreatedAt": "2021-12-05T16:51:35.629+08:00",
        "UpdatedAt": "2021-12-05T16:51:35.629+08:00",
        "DeletedAt": null,
        "HomeworkName": "eewew",
        "HomeworkDescribe": "<p>Hello World!<br/>Some initial <strong>bold</strong> text<br/></p>",
        "EndTime": "2021-12-19T15:55:38.713+08:00",
        "CurriculumId": "1467029219694350336",
        "StartTime": "2021-12-05T15:55:38.713+08:00",
        "CurriculumName": "测试课程-"
      }]
    }
  },
  methods: {
    changeSelCurr(){
      this.page=1
      this.setUpData()
    },
    deleteHomework(val) {
      axios.get('/api/teacher/DeleteHomework', {
        params: {
          id: val.row.ID
        }
      }).then((res) => {
        if (res.status === 200) {
          ElMessage.success({
            message: '删除成功'
          })
          this.setUpData()
        }
      })
    },
    TimeFormat(row, column, cellValue, index) {
      var now = moment()
      var end = moment(cellValue)
      var differMil = end.diff(now);
      if (differMil < 0) {
        return "已过期"
      }
      var remainTime = moment.duration(differMil)
      return remainTime.days() + '天' + remainTime.hours() + "小时" + remainTime.minutes() + "分钟"
    },
    setUpData() {
      var curr_info = "ALL"
      if (this.selectedCurriculum!==null){
        if (this.selectedCurriculum.length===1){
          curr_info = "s_"+this.selectedCurriculum[0]
        }else if (this.selectedCurriculum.length===2){
          curr_info = "c_"+this.selectedCurriculum[1]
        }
      }
      axios.post("/api/teacher/PageHomeWorkList",{
        curr_info: curr_info,
        page: this.page,
        page_size: this.pageSize
      }).then((res) => {
        if (res.status === 200) {
          this.count = Number(res.data.count)
          this.homeWorkTable = res.data.home_work_list
        }
      })
    },
    jumpTo: function (name, data) {
      this.$router.push({name: name, params: data})
    },
    delHomeWork(item) {
      axios.get("/api/teacher/DeleteHomework", {params: {id: item.ID}}).then((res) => {
        if (res.status === 200 && res.data === 'delSuc') {
          this.setUpData()

        }
      })
    }
  }
}
</script>

<style scoped>

</style>